<template>
	<div class="header-container">
		<div class="l-content">
			<!-- Elment-ui：Button 按钮 -->
			<el-button
				@click="handleMenu"
				icon="el-icon-menu"
				size="mini"
			></el-button>
			<span class="text"></span>
			<!-- Element-ui: 面包屑 -->
			<el-breadcrumb separator="/">
				<el-breadcrumb-item
					v-for="item in tags"
					:key="item.name"
					:to="{ path: item.path }"
					>{{ item.label }}</el-breadcrumb-item
				>
			</el-breadcrumb>
		</div>
		<div class="r-content">
			<!--Elment-ui：Dropdown 下拉菜单 -->
			<el-dropdown>
				<span class="el-dropdown-link">
					<!--Elment-ui：Avatar 头像 -->
					<el-avatar
						src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
					></el-avatar>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>个人中心</el-dropdown-item>
					<el-dropdown-item>登陆注销</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
import { mapState } from "vuex"

export default {
	data() {
		return {}
	},
	methods: {
		handleMenu() {
			this.$store.commit("collapseMenu") // 提交mutations
		},
	},
	computed: {
		...mapState({
			tags: (state) => state.tab.tabsList,
		}),
	},
}
</script>

<style lang="less" scoped>
.header-container {
	padding: 0 20px;
	height: 60px;
	background-color: #333;
	// flex弹性布局
	display: flex;
	justify-content: space-between;
	align-items: center; // 垂直居中
}
.text {
	color: #fff;
	font-size: 14px;
	margin-left: 10px;
}
.r-content {
	.el-avatar {
		.el-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	}
}
.l-content {
	display: flex;
	align-items: center;
	//样式穿透
	/deep/.el-breadcrumb__item {
		.el-breadcrumb__inner {
			font-weight: normal;
			&.is-link {
				color: #666;
			}
		}
		&:last-child {
			.el-breadcrumb__inner {
				color: #fff;
			}
		}
	}
}
</style>
